<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": ""
  }
}
</route>

<script lang="ts" setup>
import UvPickColor from "./uv-pick-color/uv-pick-color.vue";

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(["update:modelValue"]);

const colorVal = ref("#000");
const selectColor = (e) => {
  colorVal.value = e.hex;
  emit("update:modelValue", e.hex);
};
const show = ref(false);
const pickerColor = ref(null);
const showColorSelect = () => {
  pickerColor.value.open();
  show.value = true;
};
</script>

<template>
  <view class="">
    <view
      class="rounded-[50%] w-[40px] h-[40px]"
      :style="{
        backgroundColor: colorVal,
      }"
      @click.stop="showColorSelect"
    >
    </view>
    <UvPickColor ref="pickerColor" @confirm="selectColor" />
  </view>
</template>

<style lang="scss" scoped>
//
</style>
